feature added: tracker for mangas

7 files changed, 68 insertions, 52 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
index 2db6d77..0050d61 100644
--- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -1,27 +1,34 @@
 "use client";
-import { useState, useEffect } from "react";
+
 import styles from "./read.module.css";
+import { useEffect } from "react";
 
-export default function CurrentReading() {
-	const [chapter, setChapter] = useState(null);
-	const [volume, setVolume] = useState(null);
+function get_current_info(title) {
+	let req = {};
 
 	useEffect(() => {
-		setChapter(localStorage.getItem("chapter") || "");
-		setVolume(localStorage.getItem("volume") || "");
-	});
+		const data = JSON.parse(localStorage.getItem("mangaData"));
+		data.watchHis.forEach((element) => {
+			if (element.title === title) {
+				req.chapter = element.chapter;
+				req.volume = element.volume;
+			}
+		});
+	}, []);
 
-	return CR(chapter, volume);
+	return req || false;
 }
 
-function CR(chapter, volume) {
+export default function Current({ name: title }) {
+	let data = get_current_info(title);
+	if (!data) {
+		return;
+	}
+
 	return (
-		<div className={styles.CurrentReadingContainer}>
-			{chapter && volume && (
-				<p>
-					Reading: Vol {volume} Chapter {chapter}
-				</p>
-			)}
-		</div>
+		<section className={styles.CurrentMain}>
+			<p className={styles.CurrentChapter}>{data.chapter}</p>
+			<p className={styles.CurrentVolume}>{data.volume}</p>
+		</section>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
index b8af783..e7a20ee 100644
--- a/src/app/manga/[title]/[id]/[read]/download.jsx
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -1,5 +1,6 @@
+"use client";
+
 import styles from "./read.module.css";
-// import Link from "next/link";
 
 export default function DownloadManga({ chapterId: id }) {
 	return (
@@ -7,10 +8,13 @@ export default function DownloadManga({ chapterId: id }) {
 			<a
 				href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
 				style={{ textDecoration: "none" }}
+				onClick={() =>
+					alert(
+						"Downloads are not instant. It might take some time to prepare your file. Thank you for your patience"
+					)
+				}
 			>
-				<button disabled title="Not available right now.">
-					Download - Beta
-				</button>
+				<button title="should work just fine">Download - Beta</button>
 			</a>
 		</div>
 	);
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 239a4d6..dbba6e0 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,7 +1,6 @@
 import styles from "./read.module.css";
 import Image from "next/image";
 import DownloadManga from "./download";
-import CurrentReading from "./currentReading";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -26,7 +25,6 @@ export default async function Read({ params }) {
 
 	return (
 		<div className={styles.Main}>
-			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
 				<p>Total pages: {images.length}</p>
@@ -47,7 +45,6 @@ export default async function Read({ params }) {
 						</div>
 					))}
 			</div>
-			<CurrentReading />
 		</div>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index 1d57d1c..420fff8 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -22,7 +22,7 @@
 .ImageContainer p {
 	text-align: center;
 	color: white;
-	font-family: "Kanit";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	margin: 5px;
 }
@@ -30,7 +30,7 @@
 .NotFound {
 	text-align: center;
 	color: white;
-	font-family: "Atkinson Hyperlegible";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 20px;
 }
 
@@ -43,7 +43,7 @@
 	outline: none;
 	border-radius: 5px;
 	padding: 5px;
-	font-family: "Lato";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	background-color: var(--light-green);
 	cursor: pointer;
@@ -53,13 +53,6 @@
 	background-color: var(--pastel-red);
 }
 
-.CurrentReadingContainer {
-	text-align: center;
-	color: white;
-	font-family: "Quicksand";
-	font-size: 18px;
-}
-
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 95%;
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index 19da1d3..4c11705 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -2,8 +2,21 @@
 
 import styles from "./info.module.css";
 import Link from "next/link";
+import { storeLocal } from "../../history/storeData";
 
 export default function Buttons({ content: data }) {
+	function store_to_local(title, chapter, volume, image, id, id2) {
+		let data = {
+			title: title,
+			chapter: chapter,
+			volume: volume,
+			image: image,
+			id: id,
+			mangaId: id2,
+		};
+		storeLocal(data);
+	}
+
 	return (
 		<div className={styles.ChapterContainer}>
 			{data.chapters &&
@@ -15,9 +28,16 @@ export default function Buttons({ content: data }) {
 								href={{
 									pathname: `/manga/info/read/${item.id}`,
 								}}
-								onClick={() =>
-									test(item.chapterNumber, item.volumeNumber)
-								}
+								onClick={() => {
+									store_to_local(
+										data.title.english || data.title.romaji,
+										parseInt(item.chapterNumber),
+										parseInt(item.volumeNumber),
+										data.image,
+										item.id,
+										data.id
+									);
+								}}
 							>
 								<button key={index}>
 									<div>
@@ -32,8 +52,3 @@ export default function Buttons({ content: data }) {
 		</div>
 	);
 }
-
-function test(chapter, volume) {
-	localStorage.setItem("chapter", chapter);
-	localStorage.setItem("volume", volume);
-}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 1b749db..b1b76f4 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -19,7 +19,7 @@
 }
 
 .TitleContainer p {
-	font-family: "Quicksand";
+	font-family: "Lexend Deca", serif;
 	font-size: 40px;
 	font-weight: 1000;
 }
@@ -31,13 +31,13 @@
 
 .MangaDescription {
 	color: white;
-	font-family: "Atkinson Hyperlegible";
+	font-family: "Atkinson Hyperlegible", serif;
 	max-width: 98%;
 	margin: -10px auto;
 }
 
 .Description h2 {
-	font-family: "Poppins";
+	font-family: "Lexend Deca", serif;
 	color: gray;
 }
 
@@ -47,12 +47,14 @@
 
 .MangaReleaseYear {
 	margin-top: 10px;
+	font-family: "Poppins", serif;
 }
 
 .GenreContainer {
 	margin-top: 5px;
 	display: flex;
 	align-items: center;
+	font-family: "Poppins", serif;
 }
 
 .GenreText {
@@ -80,6 +82,7 @@
 .MangaRatings {
 	display: flex;
 	margin-top: 10px;
+	font-family: "Poppins", serif;
 	/* justify-content: center; */
 }
 
@@ -96,7 +99,7 @@
 
 .CharactersContainer h2 {
 	color: gray;
-	font-family: "Poppins", serif;
+	font-family: "Lexend Deca", serif;
 }
 
 .Character {
@@ -128,6 +131,7 @@
 	text-align: center;
 	width: 110px;
 	color: white;
+	font-family: "Atkinson Hyperlegible", serif;
 }
 
 .CharacterEntry img {
@@ -146,7 +150,7 @@
 
 .ChapterTitle {
 	color: white;
-	font-family: "Kanit";
+	font-family: "Lexend Deca", serif;
 	font-size: 32px;
 }
 
@@ -183,7 +187,7 @@
 }
 
 .ChapterContainer button p {
-	font-family: "Quicksand";
+	font-family: "Atkinson Hyperlegible", serif;
 	margin: 2px;
 }
 
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index bbf1647..d743f4d 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -3,10 +3,7 @@ import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
-import CurrentReading from "./[read]/currentReading";
-import PreFetchChaterLinks from "../../cacher";
-
-// This page displays the information regarding the manga or manhwa which the user selected on the previous page.
+import { PreFetchChaterLinks } from "../../cacher";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
@@ -117,7 +114,6 @@ export default async function MangaInfo({ params }) {
 								))}
 						</div>
 					</div>
-					<CurrentReading />
 					<div className={styles.Chapters}>
 						<p className={styles.ChapterTitle}>
 							Chapters & Volumes